<template>
  <VisitorCommunal active="visitor-home">
    <n-carousel autoplay
                draggable
                show-arrow
                class="carousel"
    >
      <div class="carousel-box" v-for="(item) in carousels" :key="item.id">
        <img :src="item.src" class="carousel-img" alt="~跑了">
        <div class="carousel-title">
          <h3>{{item.title}}</h3>
          <p>{{item.describe}}</p>
        </div>
      </div>
      <template #arrow="{ prev, next }">
        <div class="custom-arrow">
          <button type="button" class="custom-arrow--left" @click="prev">
            <n-icon><ArrowBack /></n-icon>
          </button>
          <button type="button" class="custom-arrow--right" @click="next">
            <n-icon><ArrowForward /></n-icon>
          </button>
        </div>
      </template>
      <template #dots="{ total, currentIndex, to }">
        <ul class="custom-dots">
          <li
              v-for="index of total"
              :key="index"
              :class="{ ['is-active']: currentIndex === index - 1 }"
              @click="to(index - 1)"
          />
        </ul>
      </template>
    </n-carousel>
    <CartGroup :options="option1" >
      <template #footer>
        <n-flex justify="space-between">
          <n-time time-zone="Asia/Shanghai" type="date" format="yyyy-MM-dd" class="time"/>
          <n-icon :component="CloudyNightOutline"/>
        </n-flex>
      </template>
    </CartGroup>
    <CartGroup :options="optionsCart"/>
    <div class="video-main type-area">
      <n-h2><strong style="color: white">视 频 介 绍</strong></n-h2>
      <video src="" controls muted :poster='cartBaseSrc+"pexels-bilakis-2630760.jpg"' width="100%"></video>
    </div>
    <n-flex  class="type-area">
      <n-grid cols="9" x-gap="24">
        <n-gi span="3">
          <div class="b5-left-bg">
            <div class="b5-left-tt">
              <h2>支持多方案无人机巡检、巡逻业务场景的解决</h2>
              <p>采用DJI无人机，依托自研的自动驾驶、自动机场、远程智能控制技术为多个行业提供专业化无人机全自动巡检、巡逻、应急解决方案</p>
            </div>
          </div>
        </n-gi>
        <n-gi span="6">
          <n-grid cols="2" x-gap="12" y-gap="8" >
            <n-gi v-for="(item) in cartOption3" :key="item.id">
              <div class="b5-right-ltb">
                <div class="b5-re"><span>{{item.id}}</span></div>
                <n-flex vertical class="b5-right-text">
                  <div class="b5-right-img">
                    <img :src="item.src" width="300" alt="跑了~">
                  </div>
                  <div class="b5-right-title">
                    <n-h3><strong>{{item.title}}</strong></n-h3>
                    <n-ellipsis :line-clamp="1">{{item.label}}</n-ellipsis>
                  </div>
                </n-flex>
              </div>
            </n-gi>
          </n-grid>
        </n-gi>
      </n-grid>
    </n-flex>
    <CartGroup :options="cartOption4"/>
    <n-flex class="type-area item-center" vertical>
      <n-h1><strong>团 队 成 员</strong></n-h1>
      <n-carousel autoplay
                  :slides-per-view="5"
                  :space-between="20"
                  :loop="true"
                  draggable
                  :show-arrow="showArrow"
                  :dot-type="'line'"
                  style="min-height: 240px;"
      >
        <n-carousel-item v-for="(item) in groups" :key="item.id">
          <n-card hoverable class="text-align">
            <div>
              <img :src="item.src" :width="81" :height="100">
            </div>
            <div>
              <n-h3>{{item.name}}</n-h3>
              <n-tag type="primary">{{item.position}}</n-tag>
              <n-p>
                <n-ellipsis :line-clamp="2">{{item.introduce}}</n-ellipsis>
              </n-p>
            </div>
          </n-card>
        </n-carousel-item>
      </n-carousel>
    </n-flex>
  </VisitorCommunal>
</template>

<script>
import VisitorCommunal from "@/components/communal/visitor-communal.vue";
import CartGroup from "@/components/utils/CartGroup.vue";
import { ArrowBack, ArrowForward, CloudyNightOutline } from "@vicons/ionicons5";
import {ref,inject,defineComponent} from "vue";

export default defineComponent({
  name: "VisitorHomeView",
  data() {
    return {

    };
  },
  components:{
    VisitorCommunal,CartGroup,
    ArrowBack,ArrowForward
  },
  setup(){
    const cartBaseSrc = '/src/assets/images/carts/';
    //轮播图设置
    const carouselOption = [
      {id:1,title:'AI赋能，智慧巡检',describe:'自动飞行算法，自动故障检查算法，精细化电路巡检',src:cartBaseSrc+"pexels-aban-karabeli-10537250.jpg"},
      {id:2,title:'专业设备，数据仓库',describe:'基于大数据智能算力',src:cartBaseSrc+'pexels-dids-5114898.jpg'},
      {id:3,title:'图像识别，细致入微',describe:'实施智能，节省成本',src:cartBaseSrc+'pexels-cottonbro-studio-7107981.jpg'}
    ]
    //卡片1
    const cartOption1 = {
      msg: {
        title: '成熟、稳定、高度产品化',
        info: '赋能DJ无人机，实现无人机真正无人机化和智能化；赋能生产力，解放人工、提升效率'
      },
      cart: [
        {id:'1',src:cartBaseSrc+'图片-7.png',title:'作业时长久，经验丰富',label:'作业团队与沿海地区有两年多作业时长'},
        {id:'2',src:cartBaseSrc+'图片-6.png',title:'无人机数量多 大疆设备先进',label:'拥有十余驾大疆六轴或八轴小型无人机'},
        {id:'3',src:cartBaseSrc+'图片-5.png',title:'飞手数量多 专业可信度高',label:'拥有数名持证上岗无人机飞行员'}
      ]
    }
    //卡片2
    const cartOptions2 = {
      msg: {
        title: '系统化自动飞行系统，满足不同场景应用需求',
        info: '提供固定式、移动式、便携式等不同型号机场，支持小型，中型多旋翼飞机以及大型复合翼飞机'
      },
      cart: [
        {id: '1', src: cartBaseSrc+'QQ图片20230731193241.jpg', title: '多种方案', label: '节省成本，减少浪费'},
        {id: '2', src: cartBaseSrc+'QQ图片20230731193403.jpg', title: '自动巡航', label: '高效安全，全天候应对事故发生'},
        {id: '3', src: cartBaseSrc+'QQ图片20230731193324.jpg', title: '机型丰富', label: '适配不同情况，灵活应对'},
        {id: '4', src: cartBaseSrc+'QQ图片20230731193352.jpg',title:'场地实操',label:'便捷迅速，快速排除'}
      ]
    }
    //卡片3
    const cartOption3 = [
      {id: '1', src: cartBaseSrc+'图片1.png', title: '高效', label: '项目组合作团队实做实拍'},
      {id: '2', src: cartBaseSrc+'QQ图片20230731193318.png', title: '安全', label: '项目组合作团队实做实拍'},
      {id: '3', src: cartBaseSrc+'QQ图片20230731193403.jpg', title: '迅速', label: '项目组合作团队实做实拍'},
      {id: '4', src: cartBaseSrc+'QQ图片20230731193410.jpg', title: '智能', label: '项目组合作团队实做实拍'},
    ]
    //团队成员
    const groupOption=[
      {id:1,name:'杨文铭',position:'算法开发',introduce:'学习能力较强，表达中语言逻辑清晰;获得2021年讯飞杯编程大赛二等奖',src:cartBaseSrc+'图片5.png'},
      {id:2,name:'李佳轩',position:'大数据设计',introduce:'熟悉数据库管理系统如MySQL和Oracle;熟悉机器学习和数据挖掘的基本概念和方法',src:cartBaseSrc+'图片8.png'},
      {id:3,name:'胡俊垚',position:'后端开发',introduce:'立刻就会v个那不就还有 GV就不好看',src:cartBaseSrc+'图片7.png'},
      {id:4,name:'严爽',position:'前端开发',introduce:'项目前端设计与开发;辅助完成相关文档制作',src:cartBaseSrc+'图片12.png'},
      {id:5,name:'周晨曦',position:'项目设计师',introduce:'完成项目的相关文档的编写;完成公司各种设计工作',src:cartBaseSrc+'图片11.png'},
      {id:6,name:'王珍',position:'项目运营师',introduce:'擅长运用 Ps,Pr,Lr 软件，熟练掌握视频剪辑技巧;在团队中负责 ppt 的撰写。',src:cartBaseSrc+'图片7.png'},
      {id:7,name:'唐文荟',position:'项目运营师',introduce:'项目策划资料的查找和策划;ppt 相关演示文稿的制作',src:cartBaseSrc+'图片10.png'},
      {id:8,name:'盛兰晰',position:'总监',introduce:'村民，1发过火就开了退发过后发过后',src:cartBaseSrc+'图片6.png'}
    ]
    //卡片4
    const cartOption4 = {
      msg: {
        title: '项目成果概览',
        info: '赋能DJ无人机，实现无人机真正无人机化和智能化；赋能生产力，解放人工、提升效率'
      },
      cart: [
        {id:'1',src:cartBaseSrc+'img-cart-1.png',title:'经营许可证',label:'空中巡检，电力作业'},
        {id:'2',src:cartBaseSrc+'img-cart-2.png',title:'公司营业执照',label:'拥有十余驾大疆六轴或八轴小型无人机'},
        {id:'3',src:cartBaseSrc+'img-cart-3.png',title:'云端控制系统',label:'利用数仓，实现智能数据存储与处理'}
      ]
    }
    return{
      CloudyNightOutline,
      carousels:ref(carouselOption),
      option1: ref(cartOption1),
      optionsCart:ref(cartOptions2),
      cartOption3: ref(cartOption3),
      cartBaseSrc:cartBaseSrc,
      groups:ref(groupOption),
      showArrow:ref(false),
      cartOption4:ref(cartOption4)
    }
  }
})
</script>

<style lang="scss" scoped>
.chart {
  height: 100vh;
}
.carousel-box{
  position: relative;
  width: 100%;
  height: 81vh;
  overflow: hidden;
}
.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  z-index: 1;
}
.carousel-title{
  position: absolute;
  top:27%;
  left: 24%;
  color: red;
  z-index: 9;
  h3{
    color: #fff;
    font-size: 45px;
    font-weight: 800;
  }
  p{
    color: #fff;
    font-size: 18px;
  }
}
.custom-arrow {
  display: flex;
  position: absolute;
  bottom: 25px;
  right: 10px;
}

.custom-arrow button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border-width: 0;
  border-radius: 8px;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.custom-arrow button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.custom-arrow button:active {
  transform: scale(0.95);
  transform-origin: center;
}

.custom-dots {
  display: flex;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.custom-dots li {
  display: inline-block;
  width: 12px;
  height: 4px;
  margin: 0 3px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  transition: width 0.3s, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.custom-dots li.is-active {
  width: 40px;
  background: #fff;
}

.video-main{
  position: relative;
  text-align: center;
  background: url("/src/assets/images/screen/video-bg.jpg") no-repeat center center #070b3b;
  video{
    width: 100%;
    height: 560px;
    overflow: hidden;
  }
}

.b5-left-bg{
  position: relative;
  background:  #070b3b; //url("./src/assets/index/people-bg.jpg")
  border-radius: 15px;
  padding: 10rem 3rem;
  color: #fff;
  .b5-left-tt{
    h2{
      font-weight: 700;
      margin-bottom: 1rem;
    }
  }
}

.b5-re{
  text-align: center;
  position: absolute;
  z-index: 9;
  border-radius: 50%;
  width: 6.4rem;
  height: 6.4rem;
  line-height: 6.4rem;
  background: #41a5ee33;
  right: -2.5rem;
  top: -2.5rem;
  transform: scale(1,1);
  transition: 0.5s 0s ease all;
  span{
    position: absolute;
    left: 1.5rem;
    bottom: -15px;
    color: #0071dc;
    font-size: 21px;
    font-weight: 700;
  }
}
.b5-right-ltb{
  height: 13rem;
  position: relative;
  margin-bottom: 2rem;
  background: #fafafa;
  /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
  box-shadow: 2px 2px 2px 1px #1a3f5b44;
  border-radius: 5px;
  padding: .7rem 2rem;
  overflow: hidden;
  transform: translateY(0);
  transition: 0.5s 0s ease all;
  &:hover{
    box-shadow: 3px 3px 3px 1px #1a3f5b55;
    transform: translateY(-20px);
    transition: 0.5s 0s ease all;
    .b5-re{
      transform: scale(1.1,1.1);
      transition: 0.5s 0s ease all;
    }
  }
  .b5-right-text{
    .b5-right-img{
      position: absolute;
      height: 56%;
      z-index: 1;
      overflow: hidden;
      //border: 1px solid darkgoldenrod;
    }
    .b5-right-title{
      position: absolute;
      top: 64%;
    }
  }
}
.group-gi{
  text-align: center;
}

.time {
  font-size: 12px;
  color: #999;
}
</style>